// FlatList - 高性能列表组件
// FlatList 是一个高性能的列表组件，适用于长列表数据的展示。
// data属性 - 用于指定数据源 ，renderItem：从data中获取一个项目并将其渲染到列表中。
/* 
  ● 跨平台支持
  ● 支持水平布局
  ● 支持头部和尾部组件
  ● 支持下拉刷新
  ● 支持上拉加载
  ● 支持多列布局
  ● 支持列表项分隔线
*/

import {
  FlatList,
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native';
const list = [
  {
    id: 1,
    title: '马云',
  },
  {
    id: 2,
    title: '马化腾',
  },
  {
    id: 3,
    title: '刘强东',
  },
];
interface ItemProps {
  id: number;
  title: string;
}

const Item = ({ title, id }: ItemProps) => (
  <View style={styles.itemList}>
    <Text key={id} style={styles.title}>
      {title}
    </Text>
  </View>
);

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={list}
        renderItem={({ item }) => <Item id={item.id} title={item.title}></Item>}
        keyExtractor={(item) => item.id.toString()}
      ></FlatList>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  itemList: {
    backgroundColor: '#f9c2ff',
    padding: 20,
  },
  title: {
    fontSize: 30,
  },
});
